<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书借阅系统前台</title>
    <link rel="icon" href="../static/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon">
    <!--导入网页图标 -->
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon">
    <!--导入网页图标 -->
    <script src="../static/lib/jQuery/jquery-3.5.1.min.js" th:src="@{/lib/jQuery/jquery-3.5.1.min.js}"></script>
    <!--导入jQuery库 -->
    <script src="../static/lib/layui/layui.js" th:src="@{/lib/layui/layui.js}"></script>
    <!--导入layUI库 -->
    <script src="../static/lib/cookie/js.cookie-2.2.1.min.js" th:src="@{/lib/cookie/js.cookie-2.2.1.min.js}"></script>
    <!--导入cookie库 -->
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css" th:href="@{/lib/layui/css/layui.css}" media="all">
    <!--导入layUI css库 -->
    <link rel="stylesheet" href="../static/css/common.css" th:href="@{/css/common.css}">
    <!--导入公共的css，其中可定义整个网页的配色方案 -->
    <link rel="stylesheet" href="../static/css/index.css" th:href="@{/css/index.css}">
</head>

<body>
<div>
    <ul class="layui-nav" lay-filter="" style="position: fixed;top:0;left: 0;right: 0;z-index: 1000;">
        <li class="layui-nav-item"><a href="" id="hover_div" style="font-size:large">&nbsp;图书借阅系统</a></li>

        <form class="layui-input-inline  layui-layout-right" action="/index" style="margin-right: 550px; margin-top:15px">
            <input type="hidden" name="page">
            <input id="search_input" placeholder="书名、作者等关键词" name="keyword" th:value="${keyword}"
                   class="layui-input-inline">
            <button id="search_input_btn" type="submit" class="layui-input-inline">
                <i class="layui-icon layui-icon-search" style="font-size: 25px; color: #1E9FFF;"></i>
            </button>
        </form>

        <li class="layui-nav-item layui-layout-right" style="margin-right: 100px;">
            <a href="javascript:;">
                <img src="../static/images/default.jpg"
                     th:src="${session.user==null?'/images/default.jpg':session.user.picture}"
                     class="layui-nav-img">
                <span th:text="${session.user==null?'未登录':session.user.username}">啊、是你</span>
            </a>
            <dl class="layui-nav-child">
                <dd><a href="" th:href="@{/borrow}">借书管理</a></dd>
                <dd><a href="" th:href="@{/userInfo}">个人中心</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item layui-layout-right"><a href="/loginOut">安全退出</a></li>
    </ul>
</div>

<div style="margin-top:60px;margin-left:200px;margin-right:200px;margin-bottom:60px;height:1500px;">

    <div class="layui-col-md9" style="height: 100%;padding: 30px;background-color: rgb(246, 251, 255);">

        <div>
            <ul id="book_list" style="border: 5px; margin-top: -20px;">

                <li th:each="book : ${page.content}">
                    <div style="margin: 8px;">
                        <a href="#" th:href="@{/book/(bookId=${book.bookId})}">
                            <img src="/images/default.png"
                                 th:title="${book.bookName}"
                                 th:src="${book.picture!=null?book.picture:'/images/default.png'}"
                                 style="width: 120px;height: 160px;margin-bottom: 5px;">
                        </a>
                        <div style="width: 120px;text-align: center;">
                            <p class="book_name" th:text="${book.bookName}">《三体》</p>
                            <p class="book_writer" th:text="${book.bookWriter}">刘慈欣</p>
                        </div>
                    </div>
                </li>



            </ul>
        </div>
        <hr class="layui-bg-green">

        <div style="margin-top:0px;margin-left:10px" th:if="${page.totalPages}>1">
            <a type="button" class="layui-btn" onclick="page(this)" th:attr="data-page=${page.number}-1"
               th:unless="${page.first}"><i class="layui-icon layui-icon-left"></i></a>
            <a type="button" class="layui-btn layui-btn-primary" th:text="${page.number+1}">4</a>
            <a type="button" class="layui-btn" onclick="page(this)" th:attr="data-page=${page.number}+1"
               th:unless="${page.last}"><i class="layui-icon layui-icon-right"></i></a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <span style="font-size:20px;color:cadetblue;line-height: 40px;">共计<b th:text="${page.totalElements}">123</b>本书</span>
        </div>


    </div>

    <div class="layui-col-md3" style="height: 100%;background-color: rgb(238, 243, 247); padding: 20px;">
        <div style="width: 100%;">
            <h2 class="t_s_l_b">图书类别</h2>
            <ul id="type_b">
                <li><a style="color:darkcyan;font-size:18px" href="/index?typeId=-1"><span>所有类别</span>&nbsp;&nbsp;&nbsp;&nbsp;</a>
                </li>
                <li th:each="type : ${types}"><a style="color:darkcyan;font-size:18px" href="#"
                                                 th:href="@{/index/(typeId=${type.typeId})}"><span
                        th:text="${type.typename}">科幻</span>&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <!--                    <li><a style="color:darkcyan;font-size:18px" href=""><span>文学</span>&nbsp;&nbsp;&nbsp;&nbsp;</a></li>-->
                <!--                    <li><a style="color:darkcyan;font-size:18px" href=""><span>艺术</span>&nbsp;&nbsp;&nbsp;&nbsp;</a></li>-->
                <!--                    <li><a style="color:darkcyan;font-size:18px" href=""><span>艺术</span>&nbsp;&nbsp;&nbsp;&nbsp;</a></li>-->
                <!--                    <li><a style="color:darkcyan;font-size:18px" href=""><span>艺术</span>&nbsp;&nbsp;&nbsp;&nbsp;</a></li>-->
                <!--                    <li><a style="color:darkcyan;font-size:18px" href=""><span>艺术</span>&nbsp;&nbsp;&nbsp;&nbsp;</a></li>-->
                <!--                    <li><a style="color:darkcyan;font-size:18px" href=""><span>艺术</span>&nbsp;&nbsp;&nbsp;&nbsp;</a></li>-->
                <!--                    <li><a style="color:darkcyan;font-size:18px" href=""><span>艺术</span>&nbsp;&nbsp;&nbsp;&nbsp;</a></li>-->
                <!--                    <li><a style="color:darkcyan;font-size:18px" href=""><span>艺术</span>&nbsp;&nbsp;&nbsp;&nbsp;</a></li>-->
                <!--                    <li><a style="color:darkcyan;font-size:18px" href=""><span>艺术</span>&nbsp;&nbsp;&nbsp;&nbsp;</a></li>-->


            </ul>
        </div>
        <hr style="background-color:#EEF3F7; height:1px; border:none;"/>
        <br><br><br>
        <div style="width: 100%;">
            <h2 class="t_s_l_b">近期热门</h2>
            <ol class="type_list">
                <div th:each="b : ${bookList}">
                    <li><a th:href="@{/book/(bookId=${b.bookId})}" th:text="${b.bookName}">1.三体</a></li>
                    <hr class="layui-bg-green">
                </div>

                <!--                    <li><a>2.科幻</a></li>-->
                <!--                    <hr class="layui-bg-green">-->
                <!--                    <li><a>3.科幻</a></li>-->
                <!--                    <hr class="layui-bg-green">-->
                <!--                    <li><a>4.科幻</a></li>-->
                <!--                    <hr class="layui-bg-green">-->
                <!--                    <li><a>5.科幻</a></li>-->
                <!--                    <hr class="layui-bg-green">-->
                <!--                    <li><a>6.科幻</a></li>-->
                <!--                    <hr class="layui-bg-green">-->
                <!--                    <li><a>7.科幻</a></li>-->
                <!--                    <hr class="layui-bg-green">-->
                <!--                    <li><a>8.科幻</a></li>-->
                <!--                    <hr class="layui-bg-green">-->
            </ol>
        </div>

    </div>


</div>
<div th:fragment="admin-footer" class="lms-footer">

    ©2020 版权归武汉理工大学计算机1702"我都行，你们商量吧"小组所有&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span style="color:rgb(144, 145, 146)">
            技术支持：https://www.layui.com/
        </span>
</div>

<script>
    function page(obj) {
        $("[name='page']").val($(obj).data("page"));
        load();
    }

    function load() {
        window.location.href = "/index/?keyword=" + $("[name='keyword']").val() + "&" + "page=" + $("[name='page']").val();
    }

    //$('#hover_div').unbind(mouseenter).unbind(mouseleave);
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;

        //业务代码

        //toDo
    });
</script>

</body>

</html>